<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8"><br />
		<script src="../plugins/jquery-2.1.0.js"></script>
		<script src="../plugins/element-ui/vue.js"></script>
		<script src="../plugins/element-ui/index.js"></script>
		<script src="../plugins/ComUtil.js"></script>
		<script src="../plugins/layer/layer.js"></script>
		<link rel="stylesheet" href="../plugins/element-ui/index.css" / />

		<title></title>

		<style>
			.tag_row {
				margin: 0px;
				padding: 0px 20px 20px 20px;
				border-top: 1px solid #EBEEF5;
			}
			
			.cg_ul {
				padding: 10px 0px 10px 20px;
			}
			
			.cg_ul li {
				margin-bottom: 10px;
				border-bottom: 1px solid #EBEEF5;
				font-size: 14px;
			}
			
			.cg_li_he {
				height: 30px;
				line-height: 30px;
			}
			
			.cg_li_dd {
				margin: auto;
			}
			
			.cg_ul {
				padding: 10px;
			}
			
			.cg_li {
				display: flex;
			}
			
			.cg_li button {
				height: 30px;
				line-height: 30px;
				margin: 0px;
				padding: 0px 5px 0px 5px;
				color: #FFF;
				background-color: #409EFF;
				border-color: #409EFF;
				white-space: nowrap;
				cursor: pointer;
				border: 1px solid #DCDFE6;
				border-radius: 5px;
				margin-left: 10px;
			}
			
			.cgsh {
				height: 55%;
				overflow: auto;
				width: 100%;
			}
			
			.cgspan {
				display: inline-block;
				min-width: 100px;
				word-wrap: break-word;
				white-space: normal;
			}
			
			.cgsp2 {
				font-family: ms sans serif, arial;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			
			.cgsp2_lj {
				text-decoration: underline;
				color: #8CA1B8;
			}
			
			.cgsp3_lj {
				color: #8CA1B8;
			}
			
			.tag_input {
				height: 30px;
			}
			
			.el-input__inner {
				height: 100%;
			}
			
			.tag_hread {
				padding: 15px 15px 15px 0px;
				font-size: 18px;
				color: #409EFF;
			}
			
			.tag_getJb {
				padding: 15px 15px 15px 0px;
				font-size: 18px;
				color: #409EFF;
			}
			
			.tag_cg_imgd img {
				width: 100%;
				height: 100%;
				transition: all .3s;
			}
			
			.tag_cg_imgd img:hover {
				transform: scale(1.25, 1.5);
			}
			
			.tag_cg_img_over {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			.tag_cg_img_over:hover {
				-webkit-box-shadow: 0 4px 16px 0 rgb(0 0 255 / 30%);
				box-shadow: 0 4px 16px 0 rgb(0 0 255 / 30%);
				cursor: pointer;
			}
			
			.tag_cg_imgd {}
			
			.tag_mian {
				height: 200px;
				padding: 15px;
				overflow: auto;
			}
			
			.tag_cg_imgd {
				height: 100px;
				padding: 10px;
			}
			
	
			
			.tag_getJb_div {
				border: #000000 1px solid;
				height: 350px;
				padding: 0px 20px 0px 0px;
			}
			
			.uploadCgClo {
				padding: 10px;
			}
			
			.load_icon_bgc {
				background-color: #F0F0F0;
			}
			
			.load_icon_bgc:hover {
				background-color: #C1C1C1;
				cursor: pointer;
			}
			
			.load_icon {
				width: 100%;
				height: calc(100% - 20px);
				margin: auto;
				padding-top: 20px;
				text-align: center;
			}
			
			.load_icon i {
				display: block;
			}
			
			.load_icon span {
				display: block;
			}
			
			#tag_vu {
				width: 500px;
			}
			
			.save_btnan:hover {
				background-color: rgb(53, 149, 246);
			}
			
			.img_hreads {
				padding: 15px 15px 15px 0px;
				font-size: 18px;
				color: #409EFF;
			}
			
			.el_buto {
				height: 30px;
				line-height: 30px;
				margin: 0px;
				padding: 0px 10px 0px 10px;
				color: #FFF;
				background-color: #409EFF;
				border-color: #409EFF;
				white-space: nowrap;
				cursor: pointer;
				border: 1px solid #DCDFE6;
				border-radius: 5px;
				margin-left: 10px;
			}
			
			.delbj_but {
				float: right;
			}
			
			
			.bj_row{
				padding-top: 25px;
			}
			.bj_div{
				height: 30px;
			}
			.tag_el_input {
				width: 50%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="tag_vu">
			<el-row class=" tag_row">
				<el-col :span="24">
					<button class="save_btnan el_buto delbj_but" @click="delbj()">删除标记</button>
					<div id="jxx_tb">
						<ul class="cg_ul" id="cd_ullis">
							<li class="cg_li cg_li_he" style="padding: 6px 0px 6px 0px;">
								<span class="cgspan">名称：</span>
								<span class="cgsp2">
									<el-input class="tag_input" type="text" v-model="jh_name">
									</el-input>
								</span>
								<button type="primary" class="save_btnan el_buto" @click="save_edit(jh_name)">保存修改</button>
							</li>
							<li class="cg_li cg_li_he">
								<span class="cgspan">类型：</span>
								<span class="cgsp2" style="padding-left: 15px;"> 油藏工程</span>
							</li>
						</ul>
					</div>
				</el-col>
			</el-row>

			<el-row class="tag_row">
				<div class="tag_hread">
					成果
				</div>
				<div class="tag_mian">
					<el-col :span="8" class="tag_cg_imgd" v-for="ct in showTagData">
						<div class="tag_cg_img_over">
							<img :src="ct.imgUrl" />
						</div>
					</el-col>
					<el-col :span="8" class="tag_cg_imgd uploadCgClo">
						<div class="load_icon load_icon_bgc" @click="load_cgfun">
							<i class="el-icon-delete"></i>
							<span>上传成果</span>
						</div>
					</el-col>
				</div>
			</el-row>

			<el-row class="tag_row bj_row">
				<div class="demo-input-suffix bj_div">
					半径：
					<el-input v-model="tag_input_bj" class="tag_el_input">
					</el-input>
				</div>
			</el-row>

			<el-row class="tag_row">
				<div class="tag_getJb">
					搜索附近井
				</div>
				<div :span="24" class="tag_getJb_div">
				</div>
			</el-row>

			<el-row class="tag_row">
				<div class="tag_getJb">搜索附近成果资料
				</div>
				<div :span="24" class="tag_getJb_div">
				</div>
			</el-row>
		</div>

		<script>
			var showTagData = [
				{
					imgUrl:"TestImg/bannaer.png"
				},{
					imgUrl:"TestImg/bannaer.png"
				},{
					imgUrl:"TestImg/bannaer.png"
				},{
					imgUrl:"TestImg/bannaer.png"
				}
			]
			
			
			
			let tag_vu = new Vue({
				el: "#tag_vu",
				data: {
					showTagData : showTagData,
					jh_name: "湖北金号",
					tag_input_bj: "1000"
				},
				methods: {
					save_edit: function(Int) {},
					load_cgfun: function() {
						// var that = this;
						// that.config.cstid = createguid();
						// var data = {}
						// var config = {}
						// data.xm_id = that.config.xmid;
						// data.gqid = that.config.gqid;
						// data.faid = that.config.xmid;
						// data.famc = that.config.xmmc;
					
						// data.jdid = "";
						// if(conpent.tab_parm == "smcg") {
						// 	data.isxmdoc = "2";
						// }
						// config.xm_id = that.config.xmid;
						// config.jd_id = "";
						 MessageBox(data, config, function(res) {
						 	console.log(res);
						 })
					},
					delbj: function() {
						
						// $.ajax(
						// 	url:"",
						// 	data:{
						// 	},
						// 	dataType:'json',//服务器返回json格式数据
						// 	type:'post',//HTTP请求类型
						// 	timeout:10000,//超时时间设置为10秒；
						// 	success:function(data){

						// });
					}
				}
			})
		</script>
	</body>

</html>